<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Timeline</title>
        <link rel="stylesheet" href="../src/Timeline.css" />
        <script src="https://api.map.baidu.com/api?type=webgl&v=1.0&amp;ak=E4805d16520de693a3fe707cdc962045"></script>
        <script src="../src/Timeline.min.js"></script>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
            #map {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="map"></div>
        <script>
            // 百度地图API功能
            var map = new BMapGL.Map('map', {
                enableIconClick: true,
                preserveDrawingBuffer: true,
                maxZoom: 20,
                // showControls: true
                // mapType: 'B_NONE_MAP'
                // skyColorStop: [[1, 1, 0, 1],[0, 0, 1, 1], [1, 0, 0, 1]]
                // tilt: 45
            }); // 创建Map实例

            // console.log(map);
            map.centerAndZoom(new BMapGL.Point(116.404844, 39.921354), 11); // 初始化地图,设置中心点坐标和地图级别
            // map.setTilt(61);
            // //添加地图类型控件
            map.enableScrollWheelZoom(true);

            map.addControl(new BMapGL.ZoomControl());

            const marker = new BMapGL.Marker(new BMapGL.Point(116.404844, 39.921354));
            map.addOverlay(marker);

            const times = [
                '2024-01-01',
                '2024-01-02',
                '2024-01-03',
                '2024-01-04',
            ];
            const timeline = new BMapGLLib.Timeline({
                map,
                times,
            });

            const points = [
                new BMapGL.Point(116.341028,39.94083),
                new BMapGL.Point(116.308833,39.92224),
                new BMapGL.Point(116.459461,39.854476),
                new BMapGL.Point(116.430715,39.932863),
            ];
            timeline.on('change', e => {
                console.log(e);
                const point = points[times.indexOf(e.time)];
                console.log(point);
                marker.setPosition(point);
            });

        </script>
    </body>
</html>
